<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>紫色鹭</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/luara.left.css"/>

    <style>
        /*产品预览*/
        #preview {
            position: absolute;
            top: 0;
            left: 0;
            width: 352px;
        }
        #preview>#mediumDiv
        {
            width: 350px;
            height: 350px;
            margin-bottom: 5px;
            text-align:center;
            position: relative;
        }
        #preview>#mediumDiv img
        {
            vertical-align:middle;
            width:350px;
            height:350px;
        }
        #preview>#mediumDiv>#mask{
            position: absolute;
            width: 175px;
            height: 175px;
            background: #ffa;
            opacity: 0.5;
            top: 0;
            left: 0;
            display:none;
        }
        #preview>#mediumDiv>#superMask{
            position: absolute;
            width: 350px;
            height: 350px;
            opacity: 0;
            top: 0;
            left: 0;
            cursor: move;
        }
        #preview>#largeDiv{
            position: absolute;
            width: 400px;
            height: 400px;
            background: #fff;
            border: 1px solid #ddd;
            top: 0;
            left: 355px;
            z-index: 999;
            display: none;
        }
        #preview h1
        {
            width: 352px;
            height: 54px;
            overflow:hidden;
            padding: 0px;
            position:relative;
        }
        /*前后移动的按钮*/
        #preview a.backward,#preview a.forward,#preview a.backward_disabled,#preview a.forward_disabled {
            width: 17px;
            height: 54px;
            background-image: url(../images/iconlist_1.png);
            background-repeat: no-repeat;
            display:block;
            z-index:20;
            position:absolute;
            top:0px;
        }
        #preview a.backward,#preview a.backward_disabled {
            left:0px;
        }
        #preview a.forward,#preview a.forward_disabled {
            right:0px;
        }
        #preview a.backward {
            background-position: 0px -139px;
        }
        #preview a.backward:hover {
            background-position: -34px -139px;
        }
        #preview a.backward_disabled {
            background-position: -68px -139px;
        }
        #preview a.forward {
            background-position: -17px -139px;
        }
        #preview a.forward:hover {
            background-position: -51px -139px;
        }
        #preview a.forward_disabled {
            background-position: -85px -139px;
        }
        /*产品的图标列表*/
        #preview #icon_list {
            height: 54px;
            position:absolute;
            left: 20px;
            top: 2px;
        }
        #preview #icon_list li {
            width: 62px;
            text-align: center;
            float: left;
        }
        #preview #icon_list li img {
            width: 50px;
            height: 50px;
            padding: 1px;
            border: 1px solid #CECFCE;
        }
        #preview #icon_list li img:hover {
            border: 2px solid #e4393c;
            padding: 0;
        }
        .js-loveProduct{
            width: 80px;
            line-height: 23px;
            text-align: center;
            color: #999999;
            border: 1px solid #e4e4e4;
            display: inline-block;
            cursor: pointer;
            font-size: 14px;
            font-weight: normal;
            margin-left: 15px;
        }
        .js-loveProduct:hover{
            color: #fb6a30;
            border-color: #fb6a30;
        }
    </style>

</head>
<body>
<div id="header_01_html">
    <iframe id="header_01" src="head_01.html" frameborder="0"></iframe>
</div>
<div id="head_search_html">
    <iframe id="head_search" src="head_search.html" frameborder="0"></iframe>
</div>
<div class="tabRight">
    <div class="first">
        <ul>
            <li><a target="_blank"  class="icon_admin_white" title=""></a></li>
            <li>
                <a target="_blank"  class="go-shopcard">
                    <i class="icon_shopcar_white"></i>
                    <p class="mt10">购<br>物<br>车</p>
                    <span class="car-num pos-Sty1">0</span>
                </a>
            </li>
            <li>
                <a target="_blank" class="icon_list_white mt10 go-myorder" title="订单"></a>
                <a target="_blank" class="icon_collect_white mt10 go-myhas" title="收藏"></a>
                <a target="_blank" class="icon_history_white mt10 go-record" title="记录"></a>
            </li>
        </ul>
    </div>
    <div class="second">
        <a target="_blank"  class="icon_edit_white"></a>
        <a target="_blank"  class="icon_top_white mt10"></a>
    </div>
</div>
<div class="product_detail container" v-cloak>
    <div class="bread"><a>首页</a><i class="icon_right"></i><a>康明斯</a><i class="icon_right"></i>适用于康明斯QSM11发动机总成/QSM11发动机</div>
    <div class="product clearfix relative">
        <div class="banner">
            <img src="" alt="">
        </div>


    <div id="preview">
        <div id="mediumDiv">
            <img id="mImg" v-for="(item,index) in info.picUrl" v-if="index == 0" :src="imgBaseUrl + item"/>
            <div id="mask"></div>
            <div id="superMask"></div>
        </div>
        <div id="largeDiv"></div>
        <h1>
            <a target="_blank"  class="backward_disabled"></a>
            <a target="_blank"  class="forward"></a>
            <ul id="icon_list">
                <li v-for="item in info.picUrl"><img :src="imgBaseUrl + item" /></li>
            </ul>
        </h1>
    </div>
        <div class="center">
            <h3>{{info.name}}
                <span class="js-loveProduct" :data-type="info.focus">{{info.focus == 0?'收藏':'已收藏'}}</span>
            </h3>
            <table>
                <tr class="bg">
                    <td>原   价</td>
                    <td><span class="old_price">¥ {{info.originalPrice}}</span></td>
                </tr>
                <tr class="bg">
                    <td>价   格</td>
                    <td><span class="price">¥ {{info.price}}</span></td>
                </tr>
                <tr>
                    <td>型   号</td>
                    <td>{{info.origin}}</td>
                </tr>
                <tr class="border">
                    <td>品   牌</td>
                    <td>{{info.originName}}</td>
                </tr>
                <tr>
                    <td>运   费</td>
                    <td>需要与卖家协商运费</td>
                </tr>
                <tr>
                    <td>采购量</td>
                    <td>
                        <div class="computed">
                            <i class="icon_minus"></i>
                            <input type="text" value="1">
                            <i class="icon_plus"></i>
                        </div>
                        <!--<span>(销量：<i class="c_red">20个</i>)</span>-->
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <div class="button_box clearfix">
                            <div @click="buy(info.id)">立即购买</div>
                            <div @click="joinCar(info.id)"><i class="icon_shopcar"></i>加入购物车</div>
                        </div>
                    </td>
                </tr>
            </table>
            <div id="test1"></div>
        </div>
        <div class="right describe_box" v-if="info.storeId">
            <div class="name">{{storeInfo.name}}</div>
            <!--<div class="discrite">-->
                <!--<ul>-->
                    <!--<li>描述相符 <span class="c_red marl_5">5.0</span> <i class="icon_up_red"></i> 高于同行</li>-->
                    <!--<li>发货速度 <span class="c_red marl_5">5.0</span> <i class="icon_up_red"></i> 高于同行</li>-->
                    <!--<li>服务态度 <span class="c_red marl_5">5.0</span> <i class="icon_up_red"></i> 高于同行</li>-->
                <!--</ul>-->
            <!--</div>-->
            <div class="adress">
                <a target="_blank" class="QQ qq-sty1" :href="'http://wpa.qq.com/msgrd?v=3&uin='+storeInfo.qq+'&site=qq&menu=yes'">
                    <img src="../img/QQ.png" class="qq-box1" align="absmiddle">
                </a>
                <p>公司名称：{{storeInfo.entName}}</p>
                <p>所在地址：{{storeInfo.phone}}</p>
                <p>联系电话：{{storeInfo.phone}}</p>
            </div>
            <div class="button_box">
                <div @click="goStore(storeInfo.id)">进入店铺</div>
                <div @click="collect(storeInfo.id)" v-if="storeInfo.focus != 1">关注店铺</div>
                <div @click="unCollect(storeInfo.id)" v-else>已关注</div>
            </div>
        </div>
        <div class="right describe_box" v-else>
            <div class="name">{{storeInfo.name}}</div>
            <!--<div class="discrite">-->
            <!--<ul>-->
            <!--<li>描述相符 <span class="c_red marl_5">5.0</span> <i class="icon_up_red"></i> 高于同行</li>-->
            <!--<li>发货速度 <span class="c_red marl_5">5.0</span> <i class="icon_up_red"></i> 高于同行</li>-->
            <!--<li>服务态度 <span class="c_red marl_5">5.0</span> <i class="icon_up_red"></i> 高于同行</li>-->
            <!--</ul>-->
            <!--</div>-->
            <div class="adress">
                <a target="_blank" class="qq-sty1" :href="'http://wpa.qq.com/msgrd?v=3&uin='+storeInfo.qq+'&site=qq&menu=yes'">
                    <img src="../img/QQ.png" class="qq-box1" align="absmiddle">
                </a>
                <p>公司名称：十堰市东鑫旺工贸有限公司</p>
                <p>所在地址：湖北省 十堰市 茅箭区</p>
                <p>联系电话：0719-8316538</p>
            </div>
            <div class="button_box">
                <div @click="goStore(storeInfo.id)">进入店铺</div>
                <div @click="collect(storeInfo.id)" v-if="storeInfo.focus != 1">关注店铺</div>
                <div @click="unCollect(storeInfo.id)" v-else>已关注</div>
            </div>
        </div>
    </div>
    <div class="introduce clearfix">
        <div class="store_leftbox">
            <div class="box search">
                <div class="title">店内搜索</div>
                <div class="content">
                    <ul>
                        <li><label>关键字</label><input type="text" v-model="name"></li>
                        <li><label>价格</label>
                            <input type="text" class="short" v-model="startPrice">
                            &nbsp;&nbsp;-&nbsp;&nbsp;
                            <input type="text" class="short" v-model="endPrice"></li>
                        <li><label></label><div class="submit" @click="storeSearch()"><i class="icon_search"></i></div></li>
                    </ul>
                </div>
            </div>
            <div class="box class">
                <div class="title">店内分类</div>
                <!--<div class="type"><i class="icon_open"></i>发动机系统</div>-->
                <!--<ul>-->
                    <!--<li>离合器片</li>-->
                    <!--<li>离合器壳</li>-->
                    <!--<li>变速器总成</li>-->
                    <!--<li>变速箱齿轮</li>-->
                <!--</ul>-->
                <template v-for="items in storeTypeList">
                    <div class="type"><i class="icon_open"></i><span @click="goStoreHome(items.name)">{{items.name}}</span></div>
                    <ul>
                        <li v-for="item in items.subordinate" @click="goStoreHome(item.name)">{{item.name}}</li>
                        <!--<li @click="goStoreHome('配气系统')">1111</li>-->
                    </ul>
                </template>

            </div>
            <!--<div class="box sell">-->
                <!--<div class="title">热门销售</div>-->
                <!--<div class="thing" v-for="item in advertise" @click="jumpDetail(item.id)">-->
                    <!--<img v-for="(it,index) in item.picUrl" :src="imgBaseUrl + it" v-if="index == 0" alt="">-->
                    <!--<p>{{item.name}}</p>-->
                    <!--<div class="text"><span class="c_red">¥{{item.price}}</span></div>-->
                <!--</div>-->
            <!--</div>-->
            <div class="advice">
                <ul>
                    <li v-for="item in advertise" @click="jumpDetail(item.id)">
                        <img v-for="(it,index) in item.picUrl" :src="imgBaseUrl + it" v-if="index == 0" alt="">
                        <div class="price">¥{{item.price}}</div>
                        <p>{{item.name}}</p>
                        <label>广告</label>
                    </li>
                </ul>
            </div>
        </div>
        <div class="right">
            <div class="tab_box">
                <div class="tab">
                    <ul class="clearfix">
                        <li class="active c_blue">商品详情</li>
                        <!--<li><a href="#total_evaluate">累计评价 <i class="c_blue">288</i></a></li>-->
                    </ul>
                </div>
                <div class="content">
                    <p>商品名称：{{info.name}}</p>
                    <p>商品型号：{{info.origin}}</p>
                    <p>品牌：{{info.originName}}</p>
                </div>
            </div>
            <div class="detail">
                <div class="title">商品介绍</div>
                <div class="box" v-html="info.content"></div>
            </div>
            <div class="total_evaluate" id="total_evaluate">
                <div class="title">累计评价 <span class="marl_10">288</span></div>
                <div class="first clearfix">
                    <div class="box">
                        <p>好评度</p>
                        <div class="num">5.0</div>
                        <div class="star"><i></i></div>
                    </div>
                    <ul>
                        <li><span>好评 <i class="c_999">(100%)</i></span><div class="progress"><i style="width: 100%"></i></div></li>
                        <li><span>中评 <i class="c_999">(0%)</i></span><div class="progress"><i></i></div></li>
                        <li><span>差评 <i class="c_999">(0%)</i></span><div class="progress"><i></i></div></li>
                    </ul>
                </div>
                <!--<div class="screen">-->
                    <!--<i class="icon_checkbox"></i>全部-->
                    <!--<i class="icon_checkbox"></i>图片-->
                <!--</div>-->
                <div class="list">
                    <table>
                        <tr v-for="item in evaluate">
                            <td>
                                <div class="text">{{item.content}}</div>
                                <div class="img_box">
                                    <img src="../img/index_01.png" alt="">
                                </div>
                                <div class="c_999">{{item.crtTime}}</div>
                                <p class="c_blue">商家回复：感谢您购买我们的商品，非常感谢您的评价，给您购物带来的不便，我们深表歉意。我们的商品都是通过
                                    严格质检的，请您放心，如您对商品有任何疑问，您可以联系我们的售后客服，我们会妥善为您处理的。每个人对商
                                    品的期望都不一样~我们也只能保证给大家带来百分百的原装正品，国际品质，您可以放心使用哦~</p>
                            </td>
                            <td>
                                <ul>
                                    <li>型号：<i class="c_999">QSM11</i></li>
                                    <li>品牌：<i class="c_999">东风</i></li>
                                    <li>数量：<i class="c_999">1个</i></li>
                                </ul>
                            </td>
                            <td>
                                时***们<i class="c_999">（匿名）</i>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../js/config.js"></script>
<script>
    var bindzoon = true;
    var zoom={
        moved:0,//保存左移的li个数
        WIDTH:62,//保存每个li的宽度
        OFFSET:20,//保存ul的起始left值
        MAX:3,//保存可左移的最多li个数
        MSIZE:175,//保存mask的大小
        MAXLEFT:175,MAXTOP:175,//保存mask可用的最大坐标
        length:"",
        init:function(){
            //为id为preview下的h1添加单击事件代理，仅a能响应事件，事件处理函数为move
            $("body").on("click","#preview>h1 a",this.move.bind(this));
            //为id为icon_list的ul添加鼠标进入事件代理，仅li下的img可响应事件，处理函数为changeImgs
            $("body").on("mouseover","#icon_list li>img",this.changeImgs);
            //为id为superMask的div添加hover事件,切换mask的显示和隐藏,再绑定鼠标移动事件为moveMask
            var $this = this;
            $("body").on("mouseover mouseout","#superMask",function(event){
                if(event.type == "mouseover"){
                    $this.toggle()
                }else if(event.type == "mouseout"){
                    $this.toggle()
                }
            })
            $("body").on("mousemove","#superMask",function(event){
                $this.moveMask(event)
            })
            var length = $("#icon_list li").length;
            this.length = length;
            if(length <= 5){
                $(".forward").attr("class","forward_disabled");
            }
//            $("#superMask").hover(this.toggle,this.toggle).mousemove(this.moveMask.bind(this));
        },
        moveMask:function(e){
            var x=e.offsetX;//获得鼠标相对于父元素的x
            var y=e.offsetY;//获得鼠标相对于父元素的y
            //计算mask的left: x-MSIZE/2
            var left=x-this.MSIZE/2;
            //计算mask的top: y-MSIZE/2
            var top=y-this.MSIZE/2;
            //如果left越界，要改回边界值
            left=left<0?0:left>this.MAXLEFT?this.MAXLEFT:left;
            //如果top越界，要改回边界值
            top=top<0?0: top>this.MAXTOP?this.MAXTOP: top;
            //设置id为mask的元素的left为left,top为top
            $("#mask").css({left:left,top:top});
            //设置id为largeDiv的背景图片位置:
            $("#largeDiv").css("backgroundPosition", -left*16/7+"px "+-top*16/7+"px");
        },
        toggle:function(){//切换mask的显示和隐藏
            $("#mask").toggle();
            $("#largeDiv").toggle();
            //如果largeDiv的display为block
            if($("#largeDiv").css("display")=="block"){
                //获得mImg的src
                var src=$("#mImg").attr("src");
                $("#largeDiv").css("backgroundImage","url("+src+")");
            }
        },
        move:function(e){//移动一次
            var $target=$(e.target);//获得目标元素$target
            var btnClass=$target.attr("class");
            //如果btnClass中没有disabled
            if(btnClass.indexOf("disabled")==-1){
                //如果btnClass以forward开头
                //将moved+1
                //否则
                //将moved-1
                this.moved+= btnClass.indexOf("forward")!=-1?1:-1;
                //设置id为icon_list的ul的left为-moved*WIDTH+OFFSET
                $("#icon_list").css("left",-this.moved*this.WIDTH+this.OFFSET);
                this.checkA();//检查a的状态:
            }
        },
        checkA:function(){//检查两个a的状态
            //查找class属性以backward开头的a，保存在$back
            var $back=$("a[class^='backward']");
            //查找class属性以forward开头的a，保存在$for
            var $for=$("a[class^='forward']");
            if(this.moved==0){//如果moved等于0
                //设置$back的class为backward_disabled
                $back.attr("class","backward_disabled");
            }else if(this.moved==(this.length - 5)){
                //否则，如果moved等于MAX
                //设置$for的class为forward_disabled
                $for.attr("class","forward_disabled");
            }else{//否则
                //$back的class为backward
                $back.attr("class","backward");
                //$for的class为forward
                $for.attr("class","forward");
            }
        },
        changeImgs:function(e){//根据小图片更换中图片
            //获得目标元素的src属性，保存在变量src中
            var src=$(e.target).attr("src");
            //查找src中最后一个.的位置i
            var i=src.lastIndexOf(".");
            //设置id为mImg的元素的src为:
            //src从开头-i 拼上-m  拼上src从i到结尾
            $("#mImg").attr("src",src);
        }
    }

    $("body").on("click", ".store_leftbox .class .type .icon_open", function () {
        $(this).parent().next().slideToggle().siblings("ul").slideUp();
    })
    var id = getUrlParam("productid");
    var app = new Vue({
        el: '.product_detail',
        data: {
            info: "",
            imgBaseUrl: imgBaseUrl,
            storeInfo:'',
            carNum:0,
            storeId:'',
            storeTypeList:[],
            name:'',
            startPrice:'',
            endPrice:'',
            advertise:'',
            evaluate:[],
        },
        mounted:function () {
            var _this = this;
            get_ajax("/sys/order/orderEvaluate", {id: id}, function (data) {
                _this.evaluate = data;
                console.log(_this.evaluate);
            });
        },
        beforeCreate: function () {
            var that = this;
            get_ajax("/sys/storeCommodity/view", {id: id}, function (data) {
                data.picUrl = data.picUrl.split(",");
                that.info = data;
                if(that.info.storeId){
                    that.storeId = data.storeId;
                    get_ajax("/sys/store/view", {id: that.info.storeId}, function (data) {
                        that.storeInfo = data;
                        console.log(that.storeInfo)
                    });
                    get_ajax("/sys/storeCommodityType/getStoreType", {storeId: that.info.storeId}, function (data) {
                        that.storeTypeList = data;
                    });
                    get_ajax("/sys/storeCommodity/getAdvertisement", {limit:4}, function (data) {
                        data.forEach(function (item) {
                            item.picUrl = item.picUrl.split(",");
                        })
                        that.advertise = data;
                    });

                }else{

                }
            });


        },
        updated: function () {
            if(bindzoon){
                zoom.init();
                bindzoon=false;
            }
        },
        methods: {
            joinCar:function () {
                var count = $(".computed input[type=text]").val();
                get_ajax("/sys/car/addCar", {commodityId: id,count:count}, function (data) {
                    layer.msg("加入购物车成功!");
                    updataCardNum();
                })
            },
            buy:function () {
                location.href = "choose_area.html?productid="+id+"&num="+$(".computed input[type=text]").val();
            },
            collect:function (storeId) {
                get_ajax("/sys/follow/saveFollow", {storeId: storeId}, function (data) {
                    layer.msg("关注成功!");
                    app.storeInfo.focus = 1;
                })
            },
            unCollect:function (storeId) {
                get_ajax("/sys/follow/delFollow", {id: storeId}, function (data) {
                    layer.msg("取消关注成功!");
                    app.storeInfo.focus = 0;
                })
            },
            goStore:function (storeId) {
                window.open("store.html?storeid="+storeId)
            },
            goStoreHome:function(type){
                window.location.href = 'store.html?type='+type+'&storeid='+app.storeId;
            },
            storeSearch:function () {
                window.location.href = 'store.html?storeid='+app.storeId+'&name='+app.name+'&startPrice='+app.startPrice+'&endPrice='+app.endPrice;
            },
            jumpDetail:function (id) {
                location.href = 'product_detail.html?productid='+id;
            },
        },
    })
    $('.js-loveProduct').on('click',function(){
        var that = this;
        if($(that).attr('data-type')==0){
            get_ajax("/sys/follow/followCommodty", {commodtyId: id}, function (data) {
                $(that).attr('data-type',1).html('已收藏');
                layer.msg('收藏成功！')
            })
        }else{
            get_ajax("/sys/follow/delFollowCommodty", {commodtyId: id}, function (data) {
                $(that).attr('data-type',0).html('收藏');
                layer.msg('已取消收藏！')
            })
        }


    })


</script>
</body>
</html>